<script lang="ts" setup>
import { getListByConditions, getMaxSequenceOfDictionary, updateOne, urls } from '@/index';
import type { DialogModel, DictionaryType, DictionaryQueryCondition, Dictionary } from '@/index.d';
import { useRequest } from 'vue-request';
import DictionaryDetailDialog from './DictionaryDetailDialog.vue';

const title = '字典';

const currentDictionaryType = defineModel<DictionaryType>('currentDictionaryType', {
  type: Object,
  required: true
});

const queryCondition = reactive<DictionaryQueryCondition>({
  change: false,
  currentPage: 1,
  pageSize: 20,
  tenant: currentDictionaryType.value.tenant,
  typeText: currentDictionaryType.value.typeText,
  typeCode: currentDictionaryType.value.typeCode,
  state: true,
  deleted: false
});

const getDictionaryListPromise = () => {
  queryCondition.tenant = currentDictionaryType.value.tenant;
  queryCondition.typeText = currentDictionaryType.value.typeText;
  queryCondition.typeCode = currentDictionaryType.value.typeCode;
  queryCondition.state = currentDictionaryType.value.state;
  return getListByConditions<Dictionary>(urls.dictionary, queryCondition);
};

const {
  data: dictionaryList,
  run: getDictionaryList,
  loading: getDictionaryListLoading
} = useRequest(getDictionaryListPromise);

const getMaxSequencePromise = () => {
  return getMaxSequenceOfDictionary(currentDictionaryType.value.typeText);
};

const { data: getMaxSequenceData, run: getMaxSequenceRun } = useRequest(getMaxSequencePromise);

watch(
  () => currentDictionaryType.value.typeText,
  () => {
    queryCondition.tenant = currentDictionaryType.value.tenant;
    queryCondition.typeText = currentDictionaryType.value.typeText;
    queryCondition.typeCode = currentDictionaryType.value.typeCode;
    queryCondition.state = currentDictionaryType.value.state;
    getDictionaryList();
    getMaxSequenceRun();
  }
);

const detailDialogModel = reactive<DialogModel<Dictionary>>({
  visible: false,
  title,
  type: 'view',
  id: 0,
  change: false
});

watch(
  () => detailDialogModel.visible,
  value => {
    if (!value && detailDialogModel.change) {
      getDictionaryList();
      getMaxSequenceRun();
      detailDialogModel.change = false;
    }
  }
);

const changeSequence = async (data: Dictionary, direction: 'minus' | 'plus') => {
  const res = await updateOne<Dictionary>(
    `${urls.dictionary}/${data.id}/direction/${direction}`,
    {}
  );
  res && getDictionaryList();
};
</script>
<template>
  <HqContainerTable
    :title
    :base-url="urls.dictionary"
    :loading="getDictionaryListLoading"
    :table-data="dictionaryList"
    :pagination="false"
    logic-delete
    @handle-reload="getDictionaryList"
    v-model:detail-dialog-model="detailDialogModel"
  >
    <template #search>
      <hq-col kind="search">
        <el-radio-group v-model="queryCondition.deleted" @change="getDictionaryList">
          <el-radio-button label="激活" :value="false" />
          <el-radio-button label="停用" :value="true" />
        </el-radio-group>
      </hq-col>
    </template>
    <template #tableColumns>
      <hq-table-column prop="typeText" label="typeText" />
      <hq-table-column prop="sequence" label="sequence" />
      <hq-table-column prop="label" label="label" />
      <hq-table-column label="调整顺序">
        <template #default="{ row }">
          <el-button
            link
            :disabled="row.sequence === 1 || queryCondition.deleted"
            @click="changeSequence(row, 'minus')"
          >
            <el-icon><Top /> </el-icon>
          </el-button>
          <el-button
            link
            :disabled="row.sequence === dictionaryList?.length || queryCondition.deleted"
            @click="changeSequence(row, 'plus')"
          >
            <el-icon><Bottom /> </el-icon>
          </el-button>
        </template>
      </hq-table-column>
    </template>

    <template #pagination></template>
  </HqContainerTable>

  <DictionaryDetailDialog
    v-model:dialog-model="detailDialogModel"
    v-model:current-dictionary-type="currentDictionaryType"
    :max-sequence="getMaxSequenceData"
  />
</template>
<style lang="scss" scoped></style>
